
import ReactDOM from 'react-dom';
import { Route ,
  BrowserRouter as Router,
  Link,
  NavLink,
  Switch} from 'react-router-dom';
import App from './App';
import React, { Component } from 'react';
import One from './One';
import Two from './Two';

class Ind extends Component {
  constructor(){
    super();
    this.state = {
      flag: false,
      age: 1
    }
  this.toggle = this.toggle.bind(this);
  }

  toggle(){
    
    this.setState({
      flag: !this.state.flag,
      age: this.state.age+1
    })
    console.log(this.state.flag);
  }
  render(){
    return(
      
        <Router>
          <div> 
                <NavLink to={{pathname: "/One"}}>点击跳转第一个页面</NavLink>
          </div>
                <Link to={{pathname:"/Two"}}>点击跳转第二个页面</Link>
           <Switch> 
               <Route path='/Two' component={Two}/>
                <Route path='/One' component={One}/> 
            </Switch>
        <p> {this.state.age} </p>    
        <button onClick={this.toggle}> 点击切换 </button>
        <p> { this.state.flag? <App/> : "" } </p>


      {/* <NavLink to={{pathname:"/One"}}>222222</NavLink>
      <NavLink to={{pathname:"/Two"}}>333333</NavLink>
      
        <Route path='/One' component={One}/>
        <Route path='/Two' component={Two}/> */}
        
        
        
        
      
        
        </Router>
        
        
    )
  }
}

  class Inp extends Component {
  render() {
    return (
      <div>
        <Ind></Ind>
        <App></App>
      </div>
    )
  }
}

ReactDOM.render(<Inp/>, document.getElementById('root'));